<script setup lang="ts">
import { ref, inject } from 'vue';
import NdButton from '@/components/modules/NdButton.vue';
import {  type NdCardList, type NdCard, type SetTargetCardListHandler, type SetCardListElHandler, 
    type CardListDragEndHandler, type SetCardElHandler, type CardDragEndListener, 
    type SetTargetCardHandler, type CardDragOverListener, type CardSelectListener, type CreateCardListener } from '@/types/NdCard';

const props = defineProps<{
    // 当前卡片列表数据
    cardList: NdCardList;
    // 数据字段映射配置，用于适配不同数据结构
    fields: {
        list: {	
            id: string;
            title: string;
            cards: string;
        };
        card: {
            id: string;
        };
    };
}>();
// 从父组件注入的方法 - 拖拽相关
const setTargetCardList = inject<SetTargetCardListHandler>('setTargetCardList');	
const setTargetCard = inject<SetTargetCardHandler>('setTargetCard');
const setCardListEl = inject<SetCardListElHandler>('setCardListEl');
const setCardEl = inject<SetCardElHandler>('setCardEl');
const onCardListDragEnd = inject<CardListDragEndHandler>('onCardListDragEnd');
// 从父组件注入的方法 - 功能相关
const onCardSelect = inject<CardSelectListener>('onCardSelect');
const createCard = inject<CreateCardListener>('onCreateCard');
/**本地状态**/ 
// 是否显示新建卡片表单
const creatingCardType = ref(false);
// 新卡片标题
const newCardTitle = ref('');
// 创建按钮加载状态
const createCardBtnLoading = ref(false);
/**事件处理**/ 
/**
 * 显示新建卡片表单
 */
const onStartCreateCard = () => {
    creatingCardType.value = true;
};
/**
 * 取消新建卡片操作
 * 重置表单状态和输入内容
 */
const onCancelCreateCard = () => {
    creatingCardType.value = false;
    newCardTitle.value = '';
    createCardBtnLoading.value = false;
};
/**
 * 提交新建卡片
 * 调用父组件提供的创建方法并显示加载状态
 */
const onCreateCard = () => {
    createCardBtnLoading.value = true;
    createCard?.(newCardTitle.value, props.cardList[props.fields.list.id] as string|number, onCancelCreateCard);
};
/**
 * 开始拖拽整个卡片列表
 * 设置拖拽效果并通知父组件当前拖拽的列表
 * 
 * @param e - 拖拽事件对象
 */
const onCardListDragStart = (e: DragEvent) => {
    if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';
    setTargetCardList?.(props.cardList);
};
/**
 * 开始拖拽单个卡片
 * 设置拖拽效果并通知父组件当前拖拽的卡片和所属列表
 * 
 * @param e - 拖拽事件对象
 * @param card - 被拖拽的卡片对象
 * @param cardListId - 卡片所属列表ID
 */
const onCardDragStart = (e: DragEvent, card: NdCard, cardListId: string|number) => {
    if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';
    setTargetCard?.(card, cardListId);
};
const onCardDragOver = inject<CardDragOverListener>('onCardDragOver');
const onCardDragEnd = inject<CardDragEndListener>('onCardDragEnd');

</script>

<template>
	<!-- 卡片列表容器 - 支持拖拽操作 -->
	<div
		:ref="el => setCardListEl?.(cardList[fields.list.id] as string|number, el as HTMLElement)"
		class="nd-card-list-container"
		:class="[
			cardList?.__activeType || ''
		]"
		draggable="true"
		@dragstart="onCardListDragStart"
		@dragend="onCardListDragEnd"
		@drop="onCardDragEnd"
		@dragover="onCardDragOver?.($event, cardList[fields.list.id] as string|number)"	
	>
		<!-- 列表标题区域 -->
		<div class="nd-card-list-header">
			<div class="nd-card-list-name">
				<slot
					name="header"
					:card-list="cardList"
				/>
			</div>
		</div>
		<!-- 卡片列表区域 -->
		<ul
			class="nd-card-list"
		>
			<li
				v-for="card in cardList.cards"
				:key="card[fields.card.id] as string"
				:ref="el => setCardEl?.(card[fields.card.id] as string|number, el as HTMLElement)"
				class="nd-card"
				:class="card.__activeType"
				draggable="true"
				@dragstart.stop="onCardDragStart?.($event, card, cardList[fields.list.id] as string|number)"
				@dragend="onCardDragEnd?.()"
				@click="onCardSelect?.(card)"
			>
				<slot :card="card" />
			</li>
			<li 
				v-if="creatingCardType" 
				class="nd-card nd-create-card-form"
				@click.stop
			>
				<textarea 
					v-model="newCardTitle"
					placeholder="输入卡片标题"
					class="nd-card-title-input"
					rows="3"
					@keydown.enter.prevent="onCreateCard"
				/>
				<div class="nd-card-create-actions">
					<nd-button 
						type="success"
						:disabled="!newCardTitle.trim()"
						:loading="createCardBtnLoading"
						@click="onCreateCard"
					>
						提交
					</nd-button>
  
					<nd-button 
						type="default"
						plain
						@click="onCancelCreateCard"
					>
						取消
					</nd-button>
				</div>
			</li>
		</ul>
		<!-- 添加卡片按钮区域 -->
		<div
			v-if="!creatingCardType"
			class="nd-create-card-section"
		>
			<nd-button 
				type="primary"
				class="nd-create-card-button"
				@click="onStartCreateCard"
			>
				+ 创建卡片
			</nd-button>
		</div>
	</div>
</template>